<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>注册</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <!-- <script src="./lib/jquery.particleground.min.js" charset="utf-8"></script> -->
    <!-- <script src="./config.js"></script> -->
    <!-- <script src="./util.js"></script> -->
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            padding: 0;
            top: 0;
            position: absolute;
        }

        body {
            background-image: url('./images/BG-1.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        .container {
            margin-top: 280px;
        }
    </style>
</head>

<body>

    <div class="container">
        <div class="row justify-content-center mt-5">
            <div class="col-4">
                <div class="card">
                    <div class="card-body">
                        <h3 class="card-title text-center">注册</h3>
                        <form>
                            <div class="mb-3">
                                <input type="email" class="form-control" id="username" placeholder="账号"
                                    data-sb-validations="required">
                            </div>
                            <div class="mb-3">
                                <input type="password" class="form-control" placeholder="密码" id="password">
                            </div>
                            <div class="mb-3">
                                <input type="password" class="form-control" placeholder="重复密码" id="repeat">
                            </div>
                            <div class="mb-3">
                                <input type="text" class="form-control" placeholder="手机" id="phoneNum">
                            </div>
                            <!-- <div class="mb-3 form-check">
                                <label class="form-check-label" for="isAdmin">Admin</label>
                                <input type="checkbox" class="form-check-input" id="exampleCheck1">
                            </div> -->
                            <button type="button" id="signBtn" class="btn btn-primary w-100">注册</button>
                        </form>
                        <div style="text-align: center; font-size: 16px; margin-top: 5px;">
                            <!-- Already has an account? -->
                            已有账号？
                            &nbsp;&nbsp;<a href="./login" style="color: unset; ">登录</a></div>
                    </div>
                </div>

            </div>
        </div>

    </div>
</body>
<script>

    let requestHost = '/api';
    let signBtn = document.querySelector("#signBtn");

    function isStrongPassword(password) {
    // 正则表达式：验证密码是否满足条件
    const hasNumber = /[0-9]/; // 至少包含一个数字
    const hasLetter = /[a-zA-Z]/; // 至少包含一个字母
    const hasSpecialChar = /[!@#$%^&*(),.?":{}|<>]/; // 至少包含一个特殊符号
    const minLength = /.{8,}/; // 长度至少为8位

    return (
        hasNumber.test(password) &&
        hasLetter.test(password) &&
        hasSpecialChar.test(password) &&
        minLength.test(password)
    );
}


    // 定义警告框的配置  
    var alertConfig = {
        type: 'warning', // 警告框类型  
        title: 'Alert', // 警告框标题  
        message: 'This is a alert.', // 警告框消息内容  
        showClose: true, // 是否显示关闭按钮  
        showDismissal: true, // 是否显示取消按钮  
        duration: 3000 // 警告框持续时间（单位：毫秒）  
    };

    //绑定事件
    signBtn.addEventListener('click', () => {
        console.log("signBtn.被单击");
        let username = $('#username').val()
        let password = $('#password').val()
        let repeat = $('#repeat').val()
        let phoneNum = $('#phoneNum').val()
        if (username.trim() === '' || password.trim() === '' || repeat.trim() === '') {
            alert('请输入注册信息!')
            return;
        }

        if (password !== repeat) {
            alert('两次密码输入不一致!')
            return;
        }

        function validateMobile(mobile) {
            const mobileRegex = /^1[3-9]\d{9}$/;
            return mobileRegex.test(mobile);
        }

        if ((phoneNum.trim() !== '') && !validateMobile(phoneNum.trim())) {
            alert('请输入正确的手机号!')
            return;
        }

        if (!isStrongPassword(password)) {
            alert('密码强度不够！至少包含数字、字母、特殊字符，且8位以上！')
            return;
        }

        // $.post(requestHost + '/addUser', JSON.stringify({
        //     username,
        //     password,
        //     isAdmin: false,
        // }), (res) => {
        //     console.log(res);
        //     if (res.success) {
        //         createAlert({
        //             ...alertConfig,
        //             type: 'success',
        //             title: 'Tips',
        //             message: 'success!'
        //         })
        //         window.location.href = './login.html'
        //     } else {
        //         alertConfig.message = 'username or password error！'
        //         createAlert(alertConfig);
        //     }
        // })
        // GET请求判断用户是否存在
        $.get(requestHost + '/user/exist/' + username , (res) => {
            if (!res.success) {
                alert('服务器错误！')
                return;
            }
            if (res.data) {
                alert('用户名已存在！')
                return;
            } else {
                // 注册用户
                const secretKey = "pipeline";
                console.log(customEncrypt(password, secretKey));
                $.ajax({
                    url: requestHost + '/user/register',
                    type: 'POST',
                    data:JSON.stringify({ username, password: customEncrypt(password, secretKey), phoneNum }),
                    contentType: "application/json",
                    dataType: "json",
                    success: function (res) {
                        console.log(res);
                        if (res.success) {
                            alert('注册成功，请联系管理员审核，审核通过后即可登录！')
                            window.location.href = './login.html'
                        } else {
                            alert('注册失败！')
                        }
                    },
                })

            }
        });
    });


</script>

</html>